<!--
 * @Description: 
 * @Date: 2023-10-27 16:00:04
 * @LastEditTime: 2023-12-22 10:09:20
-->
<template>
	<div class="flowGrid">
		<div class="flowGrid-top" v-if="props.titleShow">
			<div class="flowGrid-top-item" v-for="item in Array(3).fill(1)" :key="item">
				<span>现有党员</span>
				<div>
					<span>140</span>
					<span>人</span>
				</div>
			</div>
		</div>
		<div class="flowGrid-center">
			<div class="flowGrid-title">
				<span class="flowGrid-title-span">流入党员</span>
			</div>
			<div class="virtual-list-content">
				<list-header :titleList="props.titleShow ? leftHeight : leftHeight1" />
				<div style="flex: 1; overflow: hidden" v-if="LddyDataInList.dataSource && LddyDataInList.dataSource.length > 0">
					<vue3-seamless-scroll :list="LddyDataInList.dataSource" class="seamless_scroll1" :hover="true" :step="0.4">
						<div class="seamless_scroll_item" v-for="(item, index) in LddyDataInList.dataSource" :key="index">
							<span>{{ item.dzbName }}</span>
							<span>{{ item.name }}</span>
							<span>{{ item.sex ? '男' : '女' }}</span>
							<span>流出</span>
							<a-popover overlay-class-name="screen-gantt-popover" placement="right" trigger="click">
								<template #content>
									<div class="popover-flow">
										<div class="popover-title">流动党员</div>
										<div class="popover-content">
											<div class="popover-content-message">
												<img src="../../../../assets/avater.png" />
												<div>
													<p>{{ item.name }}</p>
													<p>{{ item.age }}岁</p>
													<div>流入党员</div>
												</div>
											</div>
											<div class="popover-content-message1">
												<div>性别：{{ item.sex ? '女' : '男' }}</div>
												<div>联系方式：{{ item.phone }}</div>
												<div>所属党组织：{{ item.dzbName }}</div>
												<div>流动状态：已流入</div>
												<div>流动时间：{{ item.liuchutime }}</div>
												<div>流动地点：{{ item.liuchudi }}</div>
											</div>
										</div>
									</div>
								</template>
								<span class="virtual-list-item-col" v-if="!props.titleShow">查看</span>
							</a-popover>
						</div>
					</vue3-seamless-scroll>
				</div>
				<a-empty v-else :image="simpleImage" style="color: #fff" />
			</div>
			<div class="pagination" v-if="LddyDataInList.dataSource && LddyDataInList.dataSource.length > 0">
				<a-pagination
					size="small"
					@change="onChangeIn"
					:total="PaginationIn.total"
					v-model:current="PaginationIn.current"
					v-model:pageSize="PaginationIn.pageSize"
				/>
			</div>
		</div>
		<div class="flowGrid-bottom">
			<div class="flowGrid-title">
				<span class="flowGrid-title-span">流出党员</span>
			</div>
			<div class="virtual-list-content">
				<list-header :titleList="props.titleShow ? leftHeight : leftHeight1" />
				<div
					style="flex: 1; overflow: hidden"
					v-if="LddyDataOutList.dataSource && LddyDataOutList.dataSource.length > 0"
				>
					<vue3-seamless-scroll :list="LddyDataOutList.dataSource" class="seamless_scroll1" :hover="true" :step="0.4">
						<div class="seamless_scroll_item" v-for="(item, index) in LddyDataOutList.dataSource" :key="index">
							<span>{{ item.dzbName }}</span>
							<span>{{ item.name }}</span>
							<span>{{ item.sex ? '男' : '女' }}</span>
							<span>流出</span>
							<a-popover overlay-class-name="screen-gantt-popover" placement="right" trigger="click">
								<template #content>
									<div class="popover-flow">
										<div class="popover-title">流动党员</div>
										<div class="popover-content">
											<div class="popover-content-message">
												<img src="../../../../assets/avater.png" />
												<div>
													<p>{{ item.name }}</p>
													<p>{{ item.age }}岁</p>
													<div>流出党员</div>
												</div>
											</div>
											<div class="popover-content-message1">
												<div>性别：{{ item.sex ? '女' : '男' }}</div>
												<div>联系方式：{{ item.phone }}</div>
												<div>所属党组织：{{ item.dzbName }}</div>
												<div>流动状态：已流出</div>
												<div>流动时间：{{ item.liuchutime }}</div>
												<div>流动地点：{{ item.liuchudi }}</div>
											</div>
										</div>
									</div>
								</template>
								<span class="virtual-list-item-col" v-if="!props.titleShow">查看</span>
							</a-popover>
						</div>
					</vue3-seamless-scroll>
				</div>
				<a-empty v-else :image="simpleImage" style="color: #fff" />
			</div>
			<div class="pagination" v-if="LddyDataOutList.dataSource && LddyDataOutList.dataSource.length > 0">
				<a-pagination
					size="small"
					v-model:current="PaginationOut.current"
					v-model:pageSize="PaginationOut.pageSize"
					@change="onChangeOut"
					:total="PaginationOut.total"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
import ListHeader from '../list-header/index.vue';
import { reactive, onMounted, nextTick, defineProps } from 'vue';
import useInitData from '@/store/initData';
import useGithub from '../../composables/use-github';
import { getInit } from '../../service.ts';
import useRadar from '../../composables/use-radar';
import { getCzLddyDataIn, getCzLddyDataOut } from './service';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { Empty } from 'ant-design-vue';
const initDataStore = useInitData();
const radarFirst = useRadar();
const github = useGithub();
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const PaginationIn = reactive({
	current: 1,
	pageSize: 10,
	total: 0
});
const PaginationOut = reactive({
	current: 1,
	pageSize: 10,
	total: 0
});
const props = defineProps({
	titleShow: {
		type: Boolean,
		default: true
	},
	id: {
		type: String
	}
});
const LddyDataInList = reactive({
	loading: false,
	dataSource: []
});
const LddyDataOutList = reactive({
	loading: false,
	dataSource: []
});
const leftHeight = reactive([
	{ label: '党支部', width: '33%' },
	{ label: '级别', width: '33%' },
	{ label: '级别', width: '33%' }
]);
const leftHeight1 = reactive([
	{ label: '党支部', width: '40%' },
	{ label: '姓名', width: '10%' },
	{ label: '性别', width: '10%' },
	{ label: '状态', width: '25%' },
	{ label: '详情', width: '25%' }
]);
const initData = reactive({
	openRank: 0,
	gitHub: 0
});
onMounted(() => {
	getInList();
	getOutList();
});

function getInList(value) {
	getCzLddyDataIn({ id: props.id, pageSize: 10, pageNum: value ? value : 1 }).then(res => {
		LddyDataInList.dataSource = res.data.list;
		PaginationIn.total = res.data.totalNum;
	});
}

function getOutList(value) {
	getCzLddyDataOut({ id: props.id, pageSize: 10, pageNum: value ? value : 1 }).then(res => {
		console.log(res, 222);
		LddyDataOutList.dataSource = res.data.list;
		PaginationOut.total = res.data.totalNum;
	});
}
const onChangeIn = index => {
	getInList(index);
};
const onChangeOut = index => {
	getOutList(index);
};
</script>

<style lang="scss">
.flowGrid {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.flowGrid-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.flowGrid-top-item {
			width: 100px;
			height: 70px;
			background: rgba(255, 255, 255, 0.1);
			padding: 10px;
			box-sizing: border-box;
			span {
				color: #fff6d1;
			}
			span:nth-child(1) {
				font-size: 16px;
			}
			div {
				span:nth-child(1) {
					font-size: 22px;
					margin-right: 5px;
				}
			}
		}
	}
	.flowGrid-center {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.flowGrid-bottom {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.flowGrid-title {
		width: 100%;
		text-align: center;
		color: #ffffff;
		margin: 10px 0;
		.flowGrid-title-span {
			display: inline-block;
			position: relative;
			font-size: 16px;
			font-weight: bold;
		}
		.flowGrid-title-span:before {
			content: '';
			display: block;
			width: 11px;
			height: 2px;
			background: #ffc955;
			border-radius: 1px;
			position: absolute;
			top: 15px;
			left: -20px;
		}
		.flowGrid-title-span:after {
			content: '';
			display: block;
			width: 11px;
			height: 2px;
			background: #ffc955;
			border-radius: 1px;
			position: absolute;
			top: 15px;
			right: -20px;
		}
	}
}
.virtual-list-content {
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 8px;
	overflow: hidden;
	.virtual-list-item {
		display: flex;
		gap: 8px;
		align-items: center;
		padding: 4px;
		color: rgb(255 255 255);
		cursor: pointer;

		&:hover {
			color: #68d8ff;
			background: rgb(255 255 255 / 10%);
		}

		&-col {
			width: 33%;
			overflow: hidden;
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
.popover-flow {
	width: 306px;
}

.popover-title {
	width: 100%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #d5c7a6;
	background-image: url('../../../../assets/dTitle.png');
}
.popover-content {
	padding: 20px;
	.popover-content-message {
		display: flex;
		img {
			width: 100px;
			height: 120px;
			margin-right: 20px;
		}
		p {
			margin: 0;
		}
		p:nth-child(1) {
			font-size: 24px;
			color: #ffffff;
		}
		p:nth-child(2) {
			font-size: 14px;
			margin: 15px 0;
			color: #d5c7a6;
		}
		div:nth-child(3) {
			width: 83px;
			height: 30px;
			background: #78341d;
			border-radius: 15px;
			line-height: 30px;
			text-align: center;
			color: #ffd52f;
		}
	}
	.popover-content-message1 {
		margin-top: 20px;
		color: #ffffff;
		div {
			margin: 5px 0;
		}
	}
}
.pagination {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
}
.seamless_scroll1 {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.seamless_scroll1 .seamless_scroll_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	& > span {
		flex: 1;
		color: #fff6d1;
		text-align: center;
	}
	& > span:nth-of-type(1) {
		flex: 2 !important;
	}
	& > span:nth-of-type(4) {
		color: #ffc955 !important;
	}
	& > span:nth-of-type(5) {
		color: #ffc955 !important;
	}
}
.seamless_scroll1 .seamless_scroll_item:nth-of-type(2n) {
	background: rgba(255, 255, 255, 0.1);
}
</style>
<style lang="scss">
.screen-gantt-popover {
	.ant-popover-content {
		.ant-popover-inner {
			background: #60151a;
		}
		.ant-popover-arrow-content {
			background: transparent;
		}
		.ant-popover-inner-content {
			padding: 0;
		}
	}
}
.pagination .ant-pagination-item a {
	color: #fff6d1;
}
.pagination .anticon {
	color: #fff6d1;
}
.pagination .ant-pagination-item a:hover {
	color: #fff6d1;
}
.pagination .ant-pagination-item-active a {
	color: #60151a !important;
}
.pagination .ant-pagination-item-active {
	border-color: #60151a !important;
	background: #fff6d1;
}
</style>
